<!--HEADER BEGIN-->
<?php $this->load->view('admin/admin_header');?>
<!--HEADER END-->
<div id="header"><div class="logo"></div></div>
<div id="body-bg-bar">
    <div id="wrapper">
        <div class="bg-wrapper-top"></div>
        <div class="bg-wrapper-repeat"> <div id="divgrid"></div></div>
        <div class="bg-wrapper-bottom"></div>
    </div>    
</div>
<script type="text/javascript">
//Khởi tạo model
  Ext.define('Users', {
   extend: 'Ext.data.Model',
   fields: ['user_id','user_name', 'user_email','user_group','user_group_id','user_last_visited','user_status']
});
//Lấy dữ liệu dạng json
var Users = Ext.create('Ext.data.Store', {
   model: 'Users',
   autoLoad: true,
   proxy: {
        type: 'ajax',
        api: {
            read : BASE_URL + 'admin_user/ajax_user_get_all'
        },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            writeAllFields: true,
            encode: false,
            root: 'data'
        }
   }
});
//Khởi tạo model
  Ext.define('GroupUsers', {
   extend: 'Ext.data.Model',
   fields: ['group_id', 'group_name']
});
//Lấy dữ liệu dạng json
var GroupUsers = Ext.create('Ext.data.Store', {
   model: 'GroupUsers',
   autoLoad: true,
   proxy: {
        type: 'ajax',
        api: {
            read : BASE_URL + 'admin_user/ajax_user_group_get_all',
        },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            writeAllFields: true,
            encode: false,
            root: 'data'
        }
   }
});
Ext.create('Ext.grid.Panel', {
   renderTo: 'divgrid',
   collapsible:true,
   frame: true,
   store: Users,
   width: '100%',
   title: 'User Manager',
   loadMask: true,
   listeners: {               
        itemdblclick:function( grid, record, item, index, event){            
               var record = grid.getStore().getAt(index);
               record.edit = true;               
               windowPopup(record).show();
        }
	},
   columns: [{
      xtype: 'rownumberer',
      width: 30
   },{
      text: 'Name',
      dataIndex: 'user_name',
      flex: 1,
      width: 30    
   },{
      text: 'Email',
      dataIndex: 'user_email',
      flex: 1,
      width: 30 
   },{
      text: 'Group',
      dataIndex: 'user_group',
      flex: 1
   },{
   	  hidden: true,
   	  dataIndex: 'user_group_id'
   	},{
      text: 'Last visited',
      dataIndex: 'user_last_visited',
      flex: 1
   },{
   	  hidden: true,
   	  dataIndex: 'user_status'
   	},{
   	  hidden: true,
   	  dataIndex: 'user_id'
   	}
   	,{
        xtype:'actioncolumn',  //8
        width:50,
        items: [{
            icon: BASE_ICONS + 'user_edit.png', 
            tooltip: 'Edit',
            handler: function(grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                Ext.MessageBox.alert('Edit',rec.get('user_name'));
            }
        },{
            icon: BASE_ICONS + 'user_delete.png',
            tooltip: 'Delete',
            handler: function(grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                Ext.MessageBox.alert('Delete',rec.get('user_name'));
            }                
        }]
    }],
    tbar: [{
            text: 'Add User',
            icon: BASE_ICONS + 'user_add.png',
            tooltip: 'Add new user',
            handler : function(){
            	 var options = new Object();            	 
	             options.edit = false;
                 windowPopup(options).show();
            }
   }],
   // paging bar on the bottom
    bbar: Ext.create('Ext.PagingToolbar', {
            store: Users,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"            
    })
});

function windowPopup(options)
{	
	var active = true;
				var notActive = false;
				var allow = false;
				var uri = BASE_URL + 'admin_user/ajax_user_add';
				var user_group_id = 0;
				if(options.edit != false)
				{
					allow = true;
					if(options.get('user_status') == '1')
					{
						active = true;
					}else{
						active = false;
						notActive = true;
					}
					var user_name = options.get('user_name');
					var user_email = options.get('user_email');
					var user_group = options.get('user_group');
					user_group_id = options.get('user_group_id') - 1;
					var user_id = options.get('user_id');
					uri = BASE_URL + 'admin_user/ajax_user_update';
				}
	var windowTitle = (options.edit)?"Edit user":"Add new user";
	
	var win = Ext.create('Ext.Window', {
        title: windowTitle,
        width: 400,
        minWidth: 350,
        closable : true,
        height: 350,
        modal: true,
        closeAction: 'hide',
        bodyStyle: 'padding:10px;',
        items:[        
				Ext.create('Ext.form.Panel', {
			        frame: false,
			        height: 300,
			        width: 367,
			        bodyPadding: 5,
					fieldDefaults: {
			            labelAlign: 'left',
			            labelWidth: 90,
			            anchor: '100%'
			        },
			
			        items: [{
			            xtype: 'textfield',
			            name: 'user_name',
			            fieldLabel: 'Full Name',
			            allowBlank: false,
			            value: user_name
			        },{
			            xtype: 'textfield',
			            name: 'user_email',
			            fieldLabel: 'Email',
			            vtype: 'email',
			            allowBlank: false,
			            value: user_email
			        }, {
			            xtype: 'textfield',
			            name: 'user_password',
			            inputType: 'password',
			            fieldLabel: 'Password',
			            minLength: 6,
			            allowBlank: allow
			        },{
			            xtype: 'radio',
			            name: 'user_status',
			           	inputValue: 1,
			            fieldLabel: 'Active',
			            checked :active,
			            boxLabel: 'Yes'
			            
			        }, {
			            xtype: 'radio',
			            name: 'user_status',
			            inputValue: 0,
			            fieldLabel: '',
			            labelSeparator: '',
			            hideEmptyLabel: false,
			            checked :notActive,
			            boxLabel: 'No'
			        }, {
			             xtype: 'combobox', //9
					      fieldLabel: 'Group Level',
					      name: 'user_group_id',
					      displayField: 'group_name',
					      store: GroupUsers,
					      valueField: 'group_id',
					      value: GroupUsers.getAt(user_group_id).get('group_id'),
					      queryMode: 'local',
					      typeAhead: true,
					      selectOnFocus: true,
					      allowBlank: false
			        },{
			        	xtype: 'hidden',
			        	name: 'user_id',
			        	value: user_id
			        }],
			        
				    buttons: [{
				    	text: 'Cancel',
				    	handler: function() {
				    		win.close();
				        }
				    },{
				        text: 'Reset',
				        handler: function() {
				            this.up('form').getForm().reset();
				        }
				    }, {
				        text: 'Submit',
				        formBind: true, //only enabled once the form is valid
				        disabled: true,
				        handler: function() {
				            var form = this.up('form').getForm();
				            if (form.isValid()) {
				                form.submit({
				                	url: uri,
				                	waitMsg: 'Sending the info...',
				                    success: function(form, action) {
				                       windowPopup(options).close();
				                       Ext.Msg.alert('Success', action.result.msg, function(){
				                       		win.close();
				                       		Users.load();
				                       });                       
				                    },
				                    failure: function(form, action) {
				                        Ext.Msg.alert('Failed', action.result.msg);
				                    }
				                });
				            }
				        }
				    }]
			    })        
        ]
    });
    
    
    return win;
}


</script>   

<!--FOOTER BEGIN-->
<?php $this->load->view('admin/admin_footer');?>
<!--FOOTER END-->
